<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" href="../css/elementui.css">
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script src="../script/elementui.js"></script>
    <style>
        .head {
            padding: 8px 10px;
            background: #090909;
        }

        .content {
            padding: 20px;
        }

        .sub {
            padding-left: 15px;
        }

        .more {
            font-size: 14px;
            color: #4f8af7;
            line-height: 40px;
        }

        .more>* {
            vertical-align: middle;
        }

        .head .van-row .van-col .van-field__label {
            width: 60px;
            color: #e6c678;
        }

        .head .van-row .van-col .van-field__control {
            color: #fff;
            border-bottom: 2px solid #e6c678 !important;
        }

        .van-cell {
            background-color: transparent;
        }

        .van-cell::after {
            border-bottom: 0;
        }

        .head .van-row .van-col,
        .content .van-row .van-col {
            margin-bottom: 8px;
            text-align: center;
            font-weight: 300;
            color: #e6c678;
            font-size: 14px;
        }

        .content .van-row .van-col .van-field {
            padding: 0;
            background: #fff;
            border: 1px solid #cecece;
            border-radius: 5px;
        }

        .content .van-row .van-col .van-field__control {
            color: #000;
        }

        @keyframes load {
            0% {
                box-shadow: inset 0px 0px 100px 10px rgba(61, 134, 208, 0.6);
            }

            100% {
                box-shadow: inset 0px 0px 20px 10px rgba(61, 134, 208, 0.1);
            }
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        .yellow {
            color: yellow;
        }

        .right-button .van-button {
            margin-left: 5px;
            min-width: 100px;
        }

        .subTitle {
            padding: 5px 20px;
            color: #e6c678;
            font-weight: bold;
            font-size: 18px;
            box-shadow: 0px 1px 5px rgb(230, 198, 120);
            background: #29292a;
        }

        .subTitle .van-row .van-col {
            text-align: center;
        }

        .scanImg img {
            width: 40px;
            height: 40px;
        }

        .devicePop {
            height: 50%;
            overflow: auto;
        }

        .devicePop .van-col {
            padding: 5px 8px;
            text-align: center;
        }

        .devicePop .van-col .van-button {
            width: 100%;
        }

        .devicePop .van-col .van-button .van-button__text {
            color: #090909;
        }

        .scanPop {
            width: 160px;
            height: 180px;
            text-align: center;
            background-color: transparent;
            margin: 0;
            padding: 0;
        }

        .van-icon-enlarge {
            font-size: 150px;
            color: #e6c678;
            margin: 0;
            padding: 0;
        }

        .inputClass {
            opacity: 0;
            width: 150px;
        }

        .scanLine {
            position: absolute;
            z-index: 2;
            width: 66%;
            height: 2px;
            transform: translateX(25%);
            background-color: #e6c678;
            animation: scanLineMove 2s infinite;
        }

        .newClass {
            color: red;
        }

        @keyframes scanLineMove {
            from {
                top: 30px;
            }

            to {
                top: 120px;
            }
        }

        .el-radio.is-bordered.is-checked {
            border-color: #e6c678;
        }

        .el-radio__input.is-checked .el-radio__inner {
            border-color: #e6c678;
            background: #e6c678;
        }

        .el-radio__input.is-checked+.el-radio__label {
            color: #e6c678;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="head">
                <van-row gutter="5">
                    <van-col span="4">
                        <van-button size="small" color="linear-gradient(#fffeaa, #c07d39)" type="primary"
                            @click="onClickLeft">返回</van-button>
                    </van-col>
                    <van-col span="5">
                        <van-field v-model="formData.EquipmentName" label="设备名称" placeholder="选择设备" readonly
                            @click="openBaseScreen('机台')">
                        </van-field>
                    </van-col>
                    <van-col span="5">
                        <van-field v-model="formData.CkTime" label="点检日期" placeholder="选择日期" readonly
                            @click="showDate = true">
                        </van-field>
                    </van-col>
                    <van-col span="5">
                        <van-field v-model="formData.CheckUserName" label="点检人" placeholder="选择点检人" readonly>
                        </van-field>
                    </van-col>
                    <van-col span="5">
                        <van-field v-model="formData.periodTypeName" label="周期" placeholder="选择周期" readonly
                            @click="periodTypeShow = true">
                        </van-field>
                    </van-col>
                </van-row>
            </div>

            <div class="subTitle">
                <van-row type="flex" justify="center">
                    <van-col span="6">点检项目</van-col>
                    <van-col span="3">标准上限</van-col>
                    <van-col span="3">标准下限</van-col>
                    <van-col span="2">实测值</van-col>
                    <van-col span="10">结果</van-col>
                </van-row>
            </div>

            <div class="content">
                <van-row v-for="(item, index) in checkValue" type="flex" justify="center">
                    <van-col span="6">{{item.CheckTheProjectName}}</van-col>
                    <van-col span="3">{{item.TheStandardLimitUp}}</van-col>
                    <van-col span="3">{{item.TheStandardLimitDown}}</van-col>
                    <van-col span="2">
                        <van-field v-model="item.MeasuredValue" placeholder="实测值">
                        </van-field>
                    </van-col>

                    <van-col span="10">
                        <el-radio size="mini" v-model="item.ResultsOfEvaluation" label="1" border>合格</el-radio>
                        <!-- <el-radio size="mini" v-model="item.ResultsOfEvaluation" label="2" border>良好</el-radio> -->
                        <el-radio size="mini" v-model="item.ResultsOfEvaluation" label="0" border>不合格</el-radio>
                    </van-col>
                </van-row>
            </div>

            <div class="bottom">
                <div class="left-content">
                    <!-- <van-button v-if="checkValue.length" style="left: -15px; width: 100px;" color="#e06856"
                        @click="confirmSub">一键点检
                    </van-button> -->
                </div>
                <div class="right-button flex-box">
                    <!-- <van-button v-if="formData.SpotcheckID" color="#1989fa" :disabled="ifApprove" :loading="ifApprove"
                        loading-text="审核中..." :text="formData.Approve==1 ? '取消审核' : '审核'"
                        @click="approvalDeviceCheck(formData.Approve)" block></van-button> -->
                    <van-button v-if="formData.Approve!=1" color="#e6c678" :disabled="ifConfirm" :loading="ifConfirm"
                        loading-text="提交中..." @click="confirmSub" block>提交</van-button>
                </div>
            </div>
        </div>
        <van-action-sheet v-model="periodTypeShow" :actions="periodTypeOptions" @select="onSelectPeriodType">
        </van-action-sheet>
        <van-popup v-model="showDate" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @confirm="confirmTime"
                @cancel="showDate = false"></van-datetime-picker>
        </van-popup>

        <van-popup v-model="scanShow" class="scanPop">
            <div class="scanLine"></div>
            <van-icon name="enlarge"></van-icon>
            <input id="autoInput" inputmode="none" class="inputClass" type="number" v-model="inputCode" ref="input"
                autofocus @keyup.enter="inputFocus()">
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '机台') {
                vm.formData.EquipmentName = row.EquipmentName;
                vm.formData.EquipmentID = row.EquipmentID;
                vm.getInitData()

            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                periodTypeShow: false,
                periodTypeOptions: [
                    {
                        name: '月',
                        value: 'M'
                    },
                    {
                        name: '周',
                        value: 'W'
                    },

                    {
                        name: '日',
                        value: 'D'
                    },
                ],
                formData: {
                    EquipmentName: '',
                    EquipmentID: '',
                    CkTime: APP.getFormatDay(new Date()),
                    CheckUserName: '',
                    CheckUserID: '',
                    CheckUserCode: '',
                    SpotcheckID: 0,
                    periodTypeName: '日',
                    periodType: 'D'
                },
                deviceOctions: [],
                deviceShow: false,
                showDate: false,
                currentDate: new Date(),
                checkValue: [
                    {
                        CheckTheProjectID: '',
                        CheckTheProjectName: '',
                        TheStandardLimitUp: '',
                        TheStandardLimitDown: '',
                        periodTypeNAME: '',
                        Period: '',
                        NextDate: '',
                    }
                ],
                deviceStatusActions: [],
                ifApprove: false,
                ifConfirm: false,
                scanShow: true,
                inputCode: '',
            },
            created: function () {
                var that = this;

                if (window.localStorage.getItem('clientHeight') != 752) {
                    document.getElementById('app').style.zoom = 0
                } else {
                    document.getElementById('app').style.zoom = 1.5
                }
                if (api.pageParam.historyData) {
                    that.scanShow = false
                    that.formData.SpotcheckID = api.pageParam.historyData.SpotcheckID
                    that.getHistpryData()
                } else {
                    that.loginCheck()
                    that.formData.EquipmentName = api.pageParam.equipment.EquipmentName
                    that.formData.EquipmentID = api.pageParam.equipment.EquipmentID
                    that.getInitData()
                }
            },
            methods: {
                onSelectPeriodType(val) {
                    var that = this
                    console.log(JSON.stringify(val))
                    that.formData.periodTypeName = val.name
                    that.formData.periodType = val.value
                    that.periodTypeShow = false

                    that.getInitData()

                },
                loginCheck() {
                    var that = this
                    // if (api.pageParam.roleName == '组长') {
                    that.scanShow = false
                    that.formData.CheckUserCode = window.localStorage.getItem('pin')
                    that.formData.CheckUserName = window.localStorage.getItem('loginName')

                    if (that.formData.CheckUserCode) {
                        APP.ajax('ZS_getEmplMessage', { Code: that.formData.CheckUserCode }, function (res) {
                            console.log(JSON.stringify(res))
                            that.formData.CheckUserID = res.ds[0].EmplID
                        })
                    }
                    // }
                    // else {
                    //     setInterval(() => {
                    //         that.$refs.input.focus()
                    //         that.$refs.input.setAttribute('readonly', 'readonly');
                    //         setTimeout(function () {
                    //             that.$refs.input.removeAttribute('readonly');
                    //         }, 500);
                    //     }, 1500)
                    // }
                },
                onClickLeft() {
                    api.sendEvent({
                        name: 'refreshBrowser',
                        extra: {
                            breadData: {
                                name: '设备点检明细',
                                url: 'deviceCheckDetail',
                                ZS_FunctionID: 0,
                                click: true
                            }
                        }
                    })
                    api.closeFrame()
                },
                getInitData() {
                    var that = this
                    var obj = { EquipmentID: that.formData.EquipmentID, periodType: that.formData.periodType }
                    console.log(JSON.stringify(obj))
                    APP.ajax('getDeviceCheckTemplate', obj, function (res) {
                        console.log('res', JSON.stringify(res))
                        if (res.ds.length) {
                            that.checkValue = res.ds
                        } else {
                            that.checkValue = []
                        }
                    })
                },

                getHistpryData() {
                    var that = this
                    APP.ajax('getMasterChildTable', { SpotcheckID: that.formData.SpotcheckID }, function (res) {
                        console.log('res', JSON.stringify(res))
                        that.formData = {
                            EquipmentName: res.ds[0].EquipmentName.split('|')[1],
                            EquipmentID: api.pageParam.pageParamMsg.equipment.EquipmentID,
                            CkTime: res.ds[0].BillDate,
                            CheckUserName: res.ds[0].EmplName,
                            CheckUserID: res.ds[0].Tester,
                            CheckUserCode: '',
                            SpotcheckID: res.ds[0].SpotcheckID
                        }
                        res.ds1.map((item) => {
                            item.ResultsOfEvaluation = item.ResultsOfEvaluation + ''
                        })
                        that.checkValue = res.ds1
                    })
                },

                openBaseScreen: function (str) {
                    var that = this;
                    var obj;
                    if (str == '机台') {
                        obj = {
                            allowClear: false,
                            showSearch: true,
                            searchKey: '',
                            serverSearch: false,
                            searchBy: ['EquipmentName'],
                            isPaging: false,
                            type: str,
                            cmd: 'getZSEquipment',
                            param: {
                            }
                        }
                    }

                    api.openWin({
                        name: 'baseScreen',
                        url: 'common/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: obj
                    })
                },
                confirmTime() {
                    var that = this
                    that.formData.CkTime = APP.getFormatDay(that.currentDate)
                    that.showDate = false
                },
                inputFocus() {
                    var that = this
                    // console.log('that.inputCode', JSON.stringify(that.inputCode))
                    APP.ajax('ZS_CardLogin', { P_Card: that.inputCode }, function (res) {
                        // console.log('res', JSON.stringify(res))
                        if (res.ds[0].status == 200) {
                            that.formData.CheckUserCode = res.ds[0].pin
                            that.formData.CheckUserName = res.ds[0].Name
                            APP.ajax('ZS_getEmplMessage', { Code: that.formData.CheckUserCode }, function (res) {
                                that.formData.CheckUserID = res.ds[0].EmplID
                            })
                            vm.$toast(res.ds[0].msg);
                            that.scanShow = false
                        } else {
                            vm.$toast(res.ds[0].msg);
                        }
                        that.inputCode = ''
                    })
                },
                confirmSub() {
                    var that = this
                    var obj = {
                        ResultsOfEvaluation: that.checkValue.map((item) => item.ResultsOfEvaluation).join('~'),
                        MeasuredValue: that.checkValue.map((item) => item.MeasuredValue).join('~'),
                        checkKeepTime: that.formData.CkTime,
                        SpotcheckID: that.formData.SpotcheckID || 0,
                        TestSite: that.formData.EquipmentID,
                        CheckTheProjectID: that.checkValue.map((item) => item.CheckTheProjectID).join('~'),
                        SpotcheckIDDe: that.checkValue.map((item) => item.SpotcheckIDDe).join('~') || 0,
                        Tester: that.formData.CheckUserID,
                    }
                    console.log('obj', JSON.stringify(obj))
                    APP.ajax('EquipmentAddOrUpdate', obj, function (res) {
                        // console.log('res', JSON.stringify(res))
                        if (res.ds[0].status == 200) {
                            vm.$toast('点检成功！');

                            api.sendEvent({
                                name: 'refreshDeviceCheck'
                            })
                            api.sendEvent({
                                name: 'refreshBrowser',
                                extra: {
                                    breadData: {
                                        name: '设备点检明细',
                                        url: 'deviceCheckDetail',
                                        ZS_FunctionID: 0,
                                        click: true
                                    }
                                }
                            })

                            api.closeFrame()
                        }
                    })
                },
            }
        })
    };
</script>

</html>